<template>
    <div style="padding-left:10px; padding-right: 10px; width: calc(100vw - 200px); overflow:hidden;">
  <!--    功能趋于-->
      <div style="margin: 10px 0">
        <el-button type="warning" plain @click="add">我也要卖</el-button>
  
      </div>
  <!--    搜索区域-->
      <div style="margin: 10px 0;">
        <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
        <el-button style="margin-left: 5px; background-color: #5defc1; color: white" @click="load" plain>查询</el-button>
      
        <div class="cart" style="float:right; width: 100px; padding: 10px 5px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 10px; background-color: white; color: #595959" >
        <h4>购物车</h4>
      <p>数量: {{ cartQuantity }}</p>

    </div>
      
</div>

      <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%">
        <el-table-column
            prop="id"
            label="ID"
            sortable>
        </el-table-column>
        <el-table-column
            prop="name"
            label="名字">
        </el-table-column>
        
        <el-table-column
          prop="money"
          label="价格/元">
        </el-table-column>
       
       <el-table-column
          fixed="right"
          label="操作">

        <template #default="{ row }">
          <el-button type="primary" @click="addToCart(row)">加入</el-button>
        </template>

        
      </el-table-column>
  
      </el-table>
  
  
  
      <div style="margin: 10px 0">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
  <!--弹窗-->
  <el-dialog
            title="提示"
            v-model="dialogVisible"
            width="30%">
          <el-form :model="form" label-width="120px">
            
            <el-form-item label="名字">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            
            <el-form-item label="价格/元">
              <el-input v-model="form.money"></el-input>
            </el-form-item>
           
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
            </span>
          </template>
        </el-dialog>
  
      </div>
    </div>
  </template>
  
  <script>
  
  
  import request from "@/utils/request";

  
  export default {
    name: 'Home',
    components: {
  
    },
    data() {
      return {
        form: {},
        search:'',
        currentPage4: 1,
        pageSize: 10,
        total:0,
        dialogVisible:false,
        tableData: [],

      cartQuantity: 0 // 购物车数量

      }
    },
    created() {
      this.load();
    },
    methods:{
        addToCart() {
      this.cartQuantity++;
    },

      load(){
        request.get("/api/sechand",{
          params: {
            pageNum: this.currentPage4,
            pageSize: this.pageSize,
            search: this.search
          }
        }).then(res =>{
          console.log(res);
          this.tableData = res.data.records;
          this.total = res.data.total;
        })
      },
      add(){
          this.dialogVisible = true;
          this.form = {};
      },
      save(){
        if (this.form.id){//更新
          request.put("/api/sechand",this.form).then(res =>{
            console.log(res);
            if (res.code==='0'){
              this.$message({
                type: "success",
                message: "更新成功"
              })
            }else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
            this.load();//刷新表格数据
            this.dialogVisible = false;//关闭弹窗
          });
        }else {//新增
          request.post("/api/sechand",this.form).then(res =>{
            console.log(res);
            if (res.code==='0'){
              this.$message({
                type: "success",
                message: "新增成功"
              })
            }else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
            this.load();//刷新表格数据
            this.dialogVisible = false;//关闭弹窗
          });
        }
  
      },
      handleEdit(row){
        this.form = JSON.parse((JSON.stringify(row)));
        this.dialogVisible = true;
      },
      handleSizeChange(pageSize){//改变当前页面个数
        this.pageSize = pageSize;
        this.load();
      },
      handleCurrentChange(pageNum){//改变当前页码
        this.currentPage4 = pageNum;
        this.load();
      },
     
      handleDelete(id){
        console.log(id);
        request.delete("/api/sechand/"+id).then(res => {
          if (res.code==='0'){
            this.$message({
              type: "success",
              message: "删除成功"
            })
          }else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load()//重新加载
        });
      }
    },
  }
  </script>
